

import React, { Component } from 'react'
import {Layout,Menu} from "antd"
import "./index.scss"
import { routerList } from '../../utils/routerList';
import mobxdata from "../../mobx/data"
import {observer} from "mobx-react"
import { hashHistory } from '../../utils';
import {withRouter } from "react-router-dom"
import {connect} from "react-redux"
const { Header, Sider, Content } = Layout
const { SubMenu } = Menu;

@connect(
    state=>{
        return {
            collapsed:state.getIn(['data','collapsed']),
        }
    }
)
@withRouter   // 不能写在后面 
@observer
class MyMenu extends Component {
    itemmenuClick=({item,key})=>{
        console.log(key)
        this.props.history.push(key)
    }

    renderItemmenu=(routerList)=>{
        const {userinfo} = mobxdata  // 用户信息 里面的 权限数据 role
        
        return routerList.map((item,i)=>{
            if(item.children){
                if(userinfo.role *1 < item.premisssion *1){
                    return null
                }else{
                    return (
                        <SubMenu key={item.path} icon={item.icon}  title={item.title} >
                            {this.renderItemmenu(item.children) }
                        </SubMenu>     
                    )
                }
            }else{
                if(userinfo.role *1 < item.premisssion *1){
                    return null 
                }else{
                    return (
                        <Menu.Item key={item.path} icon={item.icon}>
                            {item.title}
                        </Menu.Item>
                    )
                }
            }
        })
    }

    render() {
        const {location} = this.props;
        const pathname = location.pathname
        const selectedKeys = [pathname]
        const names = pathname.split("/")
        console.log(names)
        const defaultOpenKeys = ['/'+names[1]+'/'+names[2] ]
        return (
            <Sider trigger={null} collapsible collapsed={this.props.collapsed}
                style={{
                    width:200,
                    height:'100vh',
                    background:'#333366'
                }}
            >
                <div className="logo"  style={{   width:'100%',padding:10,boxSizing:'border-box',backgroundColor:'#fff'}}  >
                    <img style={{height:'100%',width:'100%',display:this.props.collapsed?'none':'block'}} src='https://www.haidilao.com/english/2019/07/2019071713424793214.png
' alt=""/>
                </div>  
                
                <Menu 
                    theme="dark" 
                    mode="inline"
                    inlineCollapsed={this.props.collapsed}
                    onClick={this.itemmenuClick}
                    defaultOpenKeys={defaultOpenKeys}
                    selectedKeys={selectedKeys}
                    style={{
                        backgroundColor:'#666699'
                    }}
                >
                    {
                        this.renderItemmenu(routerList)
                    }
                </Menu>
                
            </Sider>   
        )
    }
}


export default  MyMenu